﻿Vue.component('sys-attachment', {
	data: function () {
		return {
			columns: [
				{
					title: "名称",
					name: "FileName",
					sort: true,
					hdStyles: {
						width: "260px"
					},
					bdStyles: {
					}
				},
				{
					title: "附件",
					name: "FileUrl",
					sort: true,
					href: "",
					hdStyles: {
						width: "320px"
					},
					bdStyles: {
					}
				},
				{
					title: "大小",
					name: "FileSize",
					sort: true,
					hdStyles: {
						width: "70px"
					},
					bdStyles: {
					}
				},
				{
					title: "上传人",
					name: "AddManName",
					hdStyles: {
						width: "80px"
					},
					bdStyles: {
					}
				},
				{
					title: "上传时间",
					name: "AddDate",
					hdStyles: {
						width: "120px"
					},
					bdStyles: {
					}
				}
			],
			list: [],
			total: 0,
			psize: 20,
			pnum: 1,
			styles: {
			}
		};
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		relatedid: {
			type: String
		},
		title: {
			type: String,
			default: "相关附件"
		},
		uploadurl: {
			type: String,
			default: ""
		},
		listurl: {
			type: String,
			default: ""
		},
		counturl: {
			type: String,
			default: ""
		},
		deleteurl: {
			type: String,
			default: ""
		},
		callback: {
			type: String,
			default: "relatedUploadCallback"
		},
		tblid: {
			type: String
		}
	},
	methods: {
		reload: function () {
			this.pnum = 1;
			this.refresh();
		},
		count: function () {
			var _this = this;
			utils.ajaxPost(_this.counturl, { infoid: _this.relatedid, tblid: _this.tblid }, function (resp) {
				_this.$emit('change', { action: 'total', data: resp.data });
			});
		},
		add: function () {
			var _this = this;
			layer.open({
				type: 2,
				title: '上传' + _this.title,
				shadeClose: false,
				shade: [0.3, '#000'],
				//maxmin: true, //开启最大化最小化按钮
				area: ['800px', '380px'],
				content: this.uploadurl + (this.uploadurl.indexOf('?') < 0 ? '?' : '&') + 'callback=' + this.callback + '&tblid=' + this.tblid + '&infoid=' + this.relatedid + '&nc=' + new Date().getTime()
			});
		},
		refresh: function () {
			var _this = this;
			utils.ajaxPost(_this.listurl, { infoid: _this.relatedid, tblid: _this.tblid, psize: _this.psize, pnum: _this.pnum }, function (resp) {
				_this.list = resp.data.list;
				_this.total = resp.data.total;
				_this.psize = resp.data.psize;
				_this.pnum = resp.data.pnum;
				_this.$emit('change', { action: 'total', data: resp.data.total });
			});
		},
		pageChangeHandler: function (e) {
			this.psize = e.psize;
			this.pnum = e.pnum;
			this.refresh();
		},
		listDelete: function (item) {
			var _this = this;
			utils.confirm('确定要删除该附件？', function () {
				utils.ajaxPost(_this.deleteurl, { id: item.ID }, function (resp) {
					utils.success("删除成功");
					_this.reload();
				}, function (msg) {
					utils.alert(msg);
				});
			});
		}
	},
	computed: {
		data: function () {
			var _this = this;
			return this.list.map(function (item) {
				return Object.assign({}, item, {
					FileSize: utils.formatSize(item.FileSize),
					Styles: _this.columns.map(function (col) {
						return Object.assign({}, col.bdStyles, _this.styles[col.name] ? _this.styles[col.name][item[col.name]] : {})
					}),
					Links: _this.columns.map(function (col) {
						return Object.assign({}, {
							href: typeof col.href !== 'undefined' ? (col.href ? col.href : (item[col.name]||"")).replace(/{ID}/g, item.ID) : ""
						});
					})
				});
			});
		}
	},
	filters: {
	},
	template: '<div class="detail-panel-div" style="display:none;" v-show="visible">\
		<table border="0" cellpadding="0" cellspacing="0" class= "relatedtitleTab" style="width:100%;">\
			<tbody>\
				<tr>\
					<td align="left">{{title}}</td>\
					<td align="right">\
						<button class="pure-button pure-button-edit pure-icon-bu" :title="\'创建 \'+title" @click.prevent="add">\
							<i class="icon-plus"></i>\
						</button>\
						<button class="pure-button pure-button-success pure-icon-bu" title="刷新" @click.prevent="reload">\
							<i class="icon-sync"></i>\
						</button>\
					</td>\
				</tr>\
			</tbody>\
		</table>\
		<table class="list_table" border="0" cellpadding="3" cellspacing="1" style="width:100%;table-layout:fixed;">\
			<tbody>\
				<tr>\
					<td style="width:20px;padding:5px 0;"><i class="icon-filter pure-icon-bu"></i></td>\
					<td>\
						视图: <span style="padding-right:5px;padding-top:5px;padding-bottom:5px;">\
							&nbsp;&nbsp;<a class="cus_markbai tablink" href="javascript:void(0);">所有</a>\
						</span>\
					</td>\
				</tr>\
			</tbody>\
		</table>\
		<div style="overflow: auto;width: 100%;min-height:560px;">\
			<table style="width:100%;">\
				<tr>\
					<td>\
						<table class="crm-table table100 padding2" border="0" cellpadding="3" cellspacing="1" style="width:100%;">\
						<caption v-show="list.length==0">暂无数据</caption>\
							<tr height="25px" class="windLayerHead">\
								<td style="width:50px;text-align:center;">\
									序号\
								</td>\
								<td v-for="(col,idx) in columns" :style="col.hdStyles">\
									{{col.title}}\
								</td>\
								<td style="">\
									操作\
								</td>\
							</tr>\
							<tr v-for="(item,idx) in data" :rid="item.ID" :class="{\'crm-table-plural\':idx%2==1}" style="cursor: pointer;">\
								<td style="text-align:center">{{idx+1}}</td>\
								<td v-for="(col,cidx) in columns" :style="item.Styles[cidx]">\
									<a :href="item.Links[cidx].href" v-if="item.Links[cidx].href" target="_blank">{{item[col.name]}}</a>\
									<span v-else>{{item[col.name]}}</span>\
								</td>\
								<td nowrap>\
									<i class="icon-trash pure-icon-bu crm-bu-style list-action-btn" title="删除" style="" @click="listDelete(item)"></i>\
								</td>\
							</tr>\
						</table>\
					</td>\
				</tr>\
				<tr>\
					<td><vue-pagination :total="total" :psize="psize" :pnum="pnum" @change="pageChangeHandler"></vue-pagination></td>\
				</tr>\
			</table>\
		</div>\
</div>'
});